<template>
  <div class="user-manage-container">

    <div class="user-manage-search">
      <span class="page-title">后台用户列表</span>

      <el-input placeholder="请输入搜索内容" v-model="keyWords" class="input-with-select search-keyword">
        <el-select v-model="select" slot="prepend" placeholder="请选择">
          <el-option label="登录名" value="1"></el-option>
          <el-option label="姓名" value="2"></el-option>
          <el-option label="手机号" value="3"></el-option>
        </el-select>
      </el-input>
      <el-button type="primary" size="small" icon="el-icon-search" @click="searchUser">搜索</el-button>
      <el-button type="info" size="small" class="search-keyword-reset" plain @click="resetSearch">重置</el-button>

      <el-button type="success" size="small" icon="el-icon-plus" @click="handelAdd"
                 v-if="checkPermissionPoints(1) == 1">
        新增员工
      </el-button>

      <!--<el-button type="primary" size="small" icon="el-icon-edit" @click="toggleSelection(backStage)"-->
      <!--v-show="!checkBoxIcon">批量管理-->
      <!--</el-button>-->
      <!--<el-button type="info" size="small" plain @click="toggleSelection()" v-show="checkBoxIcon">取消批量管理</el-button>-->

      <!--<el-button type="danger" size="small" icon="el-icon-delete" class="button-position" v-if="checkBoxIcon"-->
      <!--@click="batchDel">删除选中-->
      <!--</el-button>-->
    </div>

    <!--后台用户列表-->
    <div class="user-manage-table">
      <el-table ref="multipleTable" :data="backStage" border stripe fit @selection-change="handleSelectionChange"
                v-loading="listLoading" @filter-change="filterChange" :row-style="{height:'50px'}" :row-key="getRowKeys"
                :header-row-style="{height:'40px'}">
        <el-table-column type="selection" :reserve-selection="true" width="40" v-if="checkBoxIcon"></el-table-column>
        <el-table-column label="头像" width="100">
          <template slot-scope="scope">
            <img v-lazy="scope.row.lpUserUrl?scope.row.lpUserUrl:require('../../../assets/common_images/avatar.png')"
                 class="user-avatar" v-viewer/>
          </template>
        </el-table-column>
        <el-table-column label="登录名" width="200" show-overflow-tooltip>
          <template slot-scope="scope">
            <span>{{scope.row.lpUserName}}</span>
          </template>
        </el-table-column>
        <el-table-column label="手机号" width="120">
          <template slot-scope="scope">
            <span>{{scope.row.lpUserTel}}</span>
          </template>
        </el-table-column>
        <el-table-column label="工号" width="200" show-overflow-tooltip>
          <template slot-scope="scope">
            <span>{{scope.row.lpWorkNum}}</span>
          </template>
        </el-table-column>
        <el-table-column label="姓名" width="160" show-overflow-tooltip>
          <template slot-scope="scope">
            <span>{{scope.row.lpNickName}}</span>
          </template>
        </el-table-column>
        <el-table-column label="所属部门" width="120"
                         :filters="filterDept"
                         :filter-multiple="false" column-key="officeName"
                         filter-placement="bottom-end" prop="officeName">
          <template slot-scope="scope">
            <span>{{scope.row.officeName}}</span>
          </template>
        </el-table-column>
        <el-table-column label="用户角色" width="120"
                         :filters="filterRole"
                         :filter-multiple="false" column-key="className"
                         filter-placement="bottom-end" prop="className">
          <template slot-scope="scope">
            <span>{{scope.row.className}}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" min-width="200" fixed="right">
          <template slot-scope="{row}">
            <el-dropdown size="mini" :split-button="true" type="primary" @click="handleLook(row)"
                         v-if="checkPermissionPoints(3) == 1">查看
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item @click.native="handleEdit(row)" v-if="checkPermissionPoints(4) == 1">编辑
                </el-dropdown-item>
                <el-dropdown-item @click.native="handleDelete(row)" v-if="checkPermissionPoints(2) == 1">删除
                </el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </template>
        </el-table-column>
      </el-table>

      <pagination v-show="total > 0" :type="1" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit"
                  @pagination="getBackstageList"/>
    </div>

    <!--查看详情-->
    <el-dialog :title="textMap['look']" :visible.sync="dialogLookVisible" width="960px" class="user-manage-look-dialog"
               top="11vh">
      <div class="user-manage-look-box">
        <div class="look-left-box">
          <div class="user-avatar-con">
            <span class="title">头像：</span>
            <img v-lazy="lookUser.lpUserUrl?lookUser.lpUserUrl:require('../../../assets/common_images/avatar.png')"
                 class="look-avatar"/>
          </div>
          <div class="user-name-con">
            <span class="title">姓名：</span><span>{{lookUser.lpNickName}}</span>
          </div>
          <div class="user-phone-con">
            <span class="title">手机号：</span><span>{{lookUser.lpUserTel}}</span>
          </div>
          <div class="user-mail-con">
            <span class="title">邮箱：</span><span>{{lookUser.lpMail}}</span>
          </div>
          <div class="user-work-con">
            <span class="title">工号：</span><span>{{lookUser.lpWorkNum}}</span>
          </div>
          <div class="user-dept-con">
            <span class="title">所属部门：</span><span>{{lookUser.officeName}}</span>
          </div>
          <div class="user-role-con">
            <span class="title">用户角色：</span><span>{{lookUser.className}}</span>
          </div>
          <div class="user-create-time">
            <span class="title">创建时间：</span><span v-if="lookUser.time">{{lookUser.time | formatTime}}</span>
          </div>
          <div class="user-create-time">
            <span class="title">最后登录：</span><span>IP：{{lookUser.loginIp?lookUser.loginIp:'-'}}</span>&nbsp;&nbsp;&nbsp;时间：<span
            v-if="lookUser.loginTime">{{lookUser.loginTime | formatTime}}</span>
          </div>
        </div>
        <div class="look-right-box">
          <div class="user-login-con">
            <span class="title login-name">登录名：</span><span>{{lookUser.lpUserName}}</span>
          </div>
          <div class="user-init-login">
            <span class="title">初始登录密码：</span><span>666666</span>
          </div>
          <div class="user-is-login">
            <span class="title">是否允许登录：</span><span>{{lookUser.isLogin == 0?'是':'否'}}</span>
          </div>
          <div class="user-remark-con">
            <span class="title">备注：</span><span>{{lookUser.remark?lookUser.remark:'-'}}</span>
          </div>
        </div>
      </div>

      <div class="user-opt-btn">
        <el-button size="small" type="danger" class="opt-box" @click="lookDel(lookUser)">删除</el-button>
      </div>
    </el-dialog>


    <!--新增/编辑-->
    <el-dialog :title="textMap[dialogStatus]" :visible.sync="dialogUpdateVisible" width="960px" top="11vh"
               class="user-manage-look-dialog" @close="cancelBackStageUser">
      <div class="user-manage-edit-box">
        <div class="avatar-edit-con">
          <span class="title">头像：</span>
          <pan-thumb :image="image?image:require('../../../assets/common_images/avatar.png')"/>
          <el-button type="primary" icon="el-icon-upload" size="mini" class="upload-avatar-btn"
                     @click="imagecropperShow=true">上传头像
          </el-button>
        </div>
        <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-position="right" size="medium" label-width="auto"
                 class="demo-ruleForm">
          <div class="user-info-box">
            <el-form-item label="姓名:" prop="lpNickName">
              <el-input v-model="ruleForm.lpNickName" style="width: 280px" placeholder="请输入用户姓名"
                        :clearable="true"></el-input>
            </el-form-item>
            <el-form-item label="登录名:" prop="lpUserName" class="position-label">
              <span style="width: 280px" v-if="dialogStatus === 'update'">{{ruleForm.lpUserName}}</span>
              <el-input v-model="ruleForm.lpUserName" style="width: 280px" placeholder="请设置登录名，用于登录后台系统"
                        v-else></el-input>
            </el-form-item>
          </div>

          <div class="user-info-box">
            <el-form-item label="手机号:" prop="lpUserTel">
              <el-input v-model="ruleForm.lpUserTel" style="width: 280px" placeholder="请输入用户手机号"></el-input>
            </el-form-item>
            <div class="edit-init-login">
              <span class="title">初始登录密码：</span><span>666666</span>
              <el-button type="primary" size="mini" class="init-pwd" v-if="dialogStatus === 'update'"
                         @click="initPwd(ruleForm.id)">恢复为初始密码
              </el-button>
            </div>
          </div>

          <el-form-item label="邮箱:" prop="lpMail">
            <el-input v-model="ruleForm.lpMail" style="width: 280px" placeholder="请输入邮箱"></el-input>
          </el-form-item>

          <div class="user-info-box">
            <el-form-item label="工号:" prop="lpWorkNum">
              <el-input v-model="ruleForm.lpWorkNum" style="width: 280px" placeholder="请输入工号"></el-input>
            </el-form-item>
            <el-form-item label="是否允许登录:" prop="isLogin" class="edit-radio-login">
              <el-radio-group v-model="ruleForm.isLogin">
                <el-radio :label=0>允许登录</el-radio>
                <el-radio :label=1>禁止登录</el-radio>
              </el-radio-group>
            </el-form-item>
          </div>

          <div class="user-info-box">
            <div class="user-select-box">
              <el-form-item label="所属部门:" prop="lpOfficeId">
                <el-select v-model="ruleForm.lpOfficeId" filterable placeholder="请选择所属部门" style="width: 280px">
                  <el-option v-for="item in deptOptions" :key="item.lpOfficeId" :label="item.officeName"
                             :value="item.lpOfficeId"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="用户角色:" prop="className">
                <el-select v-model="ruleForm.className" filterable placeholder="请选择用户角色" style="width: 280px"
                           @change="changeClassRegion">
                  <el-option v-for="item in roleOptions" :key="item.classId" :label="item.className"
                             :value="item.className"></el-option>
                </el-select>
              </el-form-item>
            </div>
            <div class="edit-remark-con">
              <el-form-item label="备注:" prop="remark">
                <el-input type="textarea" v-model="ruleForm.remark" :autosize="{ minRows: 4, maxRows: 6 }"
                          placeholder="添加备注说明" style="width: 280px"></el-input>
              </el-form-item>
            </div>
          </div>

          <div class="edit-create-time" v-if="dialogStatus === 'update'">
            <span class="title">创建时间：</span><span v-if="ruleForm.time">{{ruleForm.time | formatTime}}</span>
          </div>
          <div class="edit-create-time" v-if="dialogStatus === 'update'">
            <span class="title">最后登录：</span><span>IP：{{ruleForm.loginIp?ruleForm.loginIp:'-'}}</span>&nbsp;&nbsp;&nbsp;时间：<span
            v-if="ruleForm.loginTime">{{ruleForm.loginTime | formatTime}}</span>
          </div>
        </el-form>
      </div>

      <div class="user-opt-btn">
        <el-button size="small" type="success" class="opt-box" @click="saveBackStageUser" :loading="sendLoad">保存
        </el-button>
        <el-button size="small" class="opt-box" @click="cancelBackStageUser">取消</el-button>
      </div>
    </el-dialog>

    <!--上传头像-->
    <image-cropper
      v-show="imagecropperShow"
      :key="imagecropperKey"
      :width="300"
      :height="300"
      url="https://www.lanpin123.com"
      lang-type="zh"
      @close="cropClose"
      @crop-upload-success="cropSuccess"
    />
  </div>
</template>

<script>
  import Pagination from '@/components/Pagination';
  import ImageCropper from '@/components/ImageCropper';
  import PanThumb from '@/components/PanThumb';
  import {mapGetters} from 'vuex';
  import {permissionPoints} from '@/utils/permission';
  import {uploadQiniu} from "@/api/qiniu";
  import {formatDate} from "@/utils/index";
  import {
    addBackUser, deleteBackUser,
    getBackstage,
    getBackUserDetail, getDeptRegionList,
    getQiNiuUpToken, getRoleRegionList,
    initUserPwd,
    modifyBackUser
  } from "../../../api/user/user";

  export default {
    name: "userManage",
    computed: {
      ...mapGetters([
        'points'
      ])
    },
    data() {
      return {
        downloadLoading: false,
        checkBoxIcon: false,
        total: 0,
        listLoading: false,
        listQuery: {
          page: 1,
          limit: 20,
          lpUserName: '',
          lpNickName: '',
          lpUserTel: '',
          officeName: '',
          className: ''
        },
        paramFilters: [],
        keyWords: '',
        select: '1',
        backStage: [],
        lookUser: {},
        multipleSelection: [],
        dialogLookVisible: false,//查看
        dialogUpdateVisible: false,//修改
        textMap: {
          create: '新增员工',
          update: '编辑员工',
          look: '详细信息'
        },
        dialogStatus: '',
        image: '',
        imagecropperShow: false,
        imagecropperKey: 0,
        ruleForm: {
          lpNickName: '',
          lpUserName: '',
          lpUserTel: '',
          lpMail: '',
          lpWorkNum: '',
          isLogin: 0,
          remark: '',
          lpOfficeId: '',
          classId: '',
          lpUserUrl: '',
          className: '',
          time: '',
          loginIp: '',
          loginTime: ''
        },
        rules: {
          lpNickName: [
            {required: true, message: '请输入姓名', trigger: 'blur'},
            {max: 5, message: '长度最多5个字符', trigger: 'blur'}
          ],
          lpUserName: [
            {required: true, message: '请输入登录名', trigger: 'blur'},
            {max: 18, message: '长度最多18个字符', trigger: 'blur'}
          ],
          lpUserTel: [
            {required: true, message: '请输入手机号', trigger: 'blur'},
            {max: 11, message: '长度最多11个字符', trigger: 'blur'}
          ],
          lpMail: [
            {required: false, message: '请输入邮箱', trigger: 'blur'}
          ],
          lpWorkNum: [
            {required: true, message: '请输入工号', trigger: 'blur'},
            {max: 50, message: '长度最多50个字符', trigger: 'blur'}
          ],
          lpOfficeId: [
            {required: true, message: '请选择所属部门', trigger: 'change'}
          ],
          className: [
            {required: true, message: '请选择用户角色', trigger: 'change'}
          ],
          remark: [
            {required: false, message: '请输入备注', trigger: 'blur'}
          ]
        },
        qinNiuToken: '',
        roleOptions: [],
        deptOptions: [],
        filterRole: [],
        filterDept: [],
        sendLoad: false
      }
    },
    created() {
      this.getBackstageList();
      getQiNiuUpToken().then((res) => {
        this.qinNiuToken = res.data;
      });

      getDeptRegionList().then((res)=>{//获取部门列表
        this.deptOptions = res.data;
        this.deptOptions.forEach(value => {
          let temp = {};
          temp.text = value.officeName;
          temp.value = value.officeName;
          this.filterDept.push(temp);
        });
      });
      getRoleRegionList().then((res)=>{//获取角色列表
        this.roleOptions = res.data;
        this.roleOptions.forEach(value => {
          let temp = {};
          temp.text = value.className;
          temp.value = value.className;
          this.filterRole.push(temp);
        });
      });
    },
    methods: {
      getRowKeys(row) {
        return row.id;
      },
      searchUser() {//搜索
        if (this.keyWords == '' || this.keyWords == undefined) {
          return this.$message.info({message: '请输入搜索内容', duration: 1000});
        }
        this.listQuery.lpUserName = '';
        this.listQuery.lpNickName = '';
        this.listQuery.lpUserTel = '';
        if (this.select == 1) {
          this.listQuery.lpUserName = this.keyWords;
        } else if (this.select == 2) {
          this.listQuery.lpNickName = this.keyWords;
        } else {
          this.listQuery.lpUserTel = this.keyWords;
        }
        this.listQuery.page = 1;
        this.getBackstageList();
      },
      resetSearch() {
        this.select = '1';
        this.keyWords = '';
        this.listQuery.lpUserName = '';
        this.listQuery.lpNickName = '';
        this.listQuery.lpUserTel = '';
        this.listQuery.officeName = '';
        this.listQuery.className = '';
        this.checkBoxIcon = false;
        this.$refs.multipleTable.clearSelection();
        this.$refs.multipleTable.clearFilter();
        this.listQuery.page = 1;
        this.getBackstageList();
      },
      filterChange(value) {//过滤
        let row = null;
        let val = null;
        for (const i in value) {
          row = i; // 保存 column-key的值，如果事先没有为column-key赋值，系统会自动生成一个唯一且恒定的名称
          val = value[i];
        }
        const filter = [{
          row: row,
          op: 'contains',
          value: val
        }];
        this.setFilter(filter)
      },
      setFilter(filters) {
        for (let i in filters) {
          let filter = null;
          for (let j in this.paramFilters) {
            if (filters[i]['row'] === this.paramFilters[j]['row']) {
              filter = this.paramFilters[j];
            }
          }

          if (filter == null) {
            this.paramFilters.push({'row': filters[i].row, 'op': filters[i].op, 'value': filters[i].value});
          } else {
            filter.value = filters[i].value;
            filter.op = filters[i].op;
          }
        }

        this.paramFilters.forEach(obj => {
          if (obj.row == 'officeName') {
            this.listQuery.officeName = String(obj.value);
          }
          if (obj.row == 'className') {
            this.listQuery.className = String(obj.value);
          }
        });
        this.listQuery.page = 1;
        this.getBackstageList();
      },
      changeClassRegion(value) {
        this.roleOptions.find((item) => {
          if (value === item.className) {
            this.ruleForm.classId = item.classId;
          }
        });
      },
      checkPermissionPoints(type) {
        let pointObj = this.points.userManage;
        return permissionPoints(type, pointObj);
      },
      getBackstageList() {//获取后台用户列表
        this.listLoading = true;
        getBackstage(this.listQuery).then((res) => {
          this.listLoading = false;
          let retObj = res;
          if (retObj.code == 0 && retObj.data != null) {
            const {items, totalRecord} = retObj.data;
            this.total = totalRecord;
            this.backStage = items;
          }
        }).catch(() => {
          this.listLoading = false;
        })
      },
      handelAdd() {//新增
        this.dialogStatus = 'create';
        this.dialogUpdateVisible = true;
      },
      handleLook(row) {//详细
        this.dialogLookVisible = true;
        getBackUserDetail(row.id).then((res) => {
          let retObj = res;
          if (retObj.code == 0 & retObj.data != null) {
            const {items} = retObj.data;
            this.lookUser = items[0];
          }
        })
      },
      lookDel(row) {
        this.handleDelete(row);
      },
      batchDel() {//批量
        let row = this.commonSelection();
        if (row && Object.keys(row).length != 0) {
          this.handleDelete(row);
        }
      },
      handleEdit(row) {//编辑
        this.dialogStatus = 'update';
        this.dialogUpdateVisible = true;
        getBackUserDetail(row.id).then((res) => {
          let retObj = res;
          if (retObj.code == 0 && retObj.data != null) {
            const {items} = retObj.data;
            this.ruleForm = items[0];
            this.image = this.ruleForm.lpUserUrl;
            this.ruleForm.isLogin = this.ruleForm.isLogin * 1;
          }
        })
      },
      initPwd(id) {//初始化密码
        this.$confirm('此操作将初始化该用户密码, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          initUserPwd(id).then((res) => {
            let retObj = res;
            if (retObj.code == 0) {
              if (retObj.data == 1) {
                this.$message.success({message: '初始化密码成功', duration: 2000});
              } else {
                this.$message.error({message: '初始化该用户密码失败，请重试', duration: 2000});
              }
            }
          })
        }).catch((err) => {
        });
      },
      commonSave() {
        addBackUser(this.ruleForm).then((res) => {
          let retObj = res;
          this.sendLoad = false;
          if (retObj.code == 0) {
            if (retObj.data == 1) {
              this.dialogUpdateVisible = false;
              this.$refs.ruleForm.resetFields();
              this.$message.success({message: '新增后台用户成功', duration: 2000});
              this.getBackstageList();
            } else {
              this.$message.error({message: '新增后台用户失败，请重试', duration: 2000});
            }
          }
        }).catch(() => {
          this.sendLoad = false;
        })
      },
      saveBackStageUser() {//保存
        if (this.dialogStatus == 'create') {
          this.$refs.ruleForm.validate((valid) => {
            if (valid) {
              this.sendLoad = true;
              if (this.image && this.image.startsWith('data:image/png;base64,')) {
                uploadQiniu(this.image, this.qinNiuToken, (res) => {//上传图片
                  this.ruleForm.lpUserUrl = res;
                  this.commonSave()
                });
              } else {
                this.ruleForm.lpUserUrl = this.image;
                this.commonSave()
              }
            }
          });
        } else {//修改
          this.$refs.ruleForm.validate((valid) => {
            if (valid) {
              this.sendLoad = true;
              if (this.image && this.image.startsWith('data:image/png;base64,')) {
                uploadQiniu(this.image, this.qinNiuToken, (res) => {//上传图片
                  this.ruleForm.lpUserUrl = res;
                  this.commonModify();
                });
              } else {
                this.ruleForm.lpUserUrl = this.image;
                this.commonModify();
              }
            }
          });
        }
      },
      commonModify() {
        modifyBackUser(this.ruleForm).then((res) => {
          let retObj = res;
          this.sendLoad = false;
          if (retObj.code == 0) {
            if (retObj.data == 1) {
              this.dialogUpdateVisible = false;
              this.$refs.ruleForm.resetFields();
              this.$message.success({message: '修改后台用户成功', duration: 2000});
              this.getBackstageList();
            } else {
              this.$message.error({message: '修改后台用户失败，请重试', duration: 2000});
            }
          }
        }).catch(() => {
          this.sendLoad = false;
        })
      },
      cancelBackStageUser() {
        this.image = '';
        this.dialogUpdateVisible = false;
        this.$refs.ruleForm.resetFields();
      },
      handleDelete(row) {//删除
        this.$confirm('此操作将删除该用户, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          deleteBackUser(row.id).then((res) => {
            let retObj = res;
            if (retObj.code == 0) {
              if (retObj.data > 0) {
                this.dialogLookVisible = false;
                this.$message.success({message: '删除成功', duration: 2000});
                this.toggleSelection();
                this.getBackstageList();
              } else {
                this.$message.error({message: '删除失败，请重试', duration: 2000});
              }
            }
          })
        }).catch((err) => {
        });
      },
      toggleSelection(rows) {
        if (rows) {
          this.checkBoxIcon = !this.checkBoxIcon;
          rows.forEach(row => {
            this.$refs.multipleTable.toggleRowSelection(row);
          });
        } else {
          this.checkBoxIcon = false;
          this.$refs.multipleTable.clearSelection();
        }
      },
      handleSelectionChange(val) {
        this.multipleSelection = val;
      },
      cropSuccess(resData) {
        this.imagecropperShow = false;
        this.imagecropperKey = this.imagecropperKey + 1;
        this.image = resData;
      },
      cropClose() {
        this.imagecropperShow = false;
      },
      commonSelection() {
        let row = {};
        let value = this.multipleSelection;
        if (value && value.length > 0) {
          let arr = [];
          value.forEach((item) => {
            arr.push(item.id);
          });
          row.id = arr.join(",");
        }
        return row;
      }
    },
    filters: {
      formatTime(time) {
        let date = new Date(time);
        return formatDate(date, 'yyyy-MM-dd hh:mm:ss');
      }
    },
    components: {
      Pagination,
      ImageCropper,
      PanThumb
    }
  }
</script>

<style lang="scss" scoped>
  .user-manage-container {
    .user-manage-search {
      display: flex;
      align-items: center;
      width: 100%;
      height: 80px;
      .page-title {
        padding-left: 20px;
        font-size: 18px;
        font-weight: bold;
        color: rgba(61, 68, 77, 1);
        min-width: 160px;
      }
      .search-keyword {
        margin-left: 36px;
        margin-right: 24px;
        width: 470px;
        > > > .el-select .el-input {
          width: 110px;
        }
        > > > .el-input-group__prepend {
          background-color: #fff;
        }
      }
      .search-keyword-reset {
        margin-right: 36px;
      }
      .button-position {
        margin-left: 30px;
      }
      .excel-inout-box {
        display: flex;
        margin-left: auto;
        margin-right: 18px;
        .upload-excel {
          margin-right: 8px;
        }
      }
    }
    .user-manage-table {
      width: 98%;
      margin-left: 18px;
      > > > .el-table td, .el-table th {
        padding: 6px 0px;
      }
      > > > .el-table__header th {
        padding: 0;
        height: 30px;
        line-height: 30px;
      }
      > > > .el-table__column-filter-trigger {
        line-height: 28px;
        i {
          font-size: 18px;
        }
      }
      > > > .el-table__row .cell {
        display: flex;
        align-items: center;
      }
      > > > .el-table__header .has-gutter .cell {
        display: flex;
        justify-content: space-between;
        align-items: center;
      }
      > > > .el-table__fixed-right {
        height: 100% !important;
      }
      .user-avatar {
        width: 36px;
        height: 36px;
        border-radius: 50%;
      }
    }
    .user-manage-look-dialog > > > .el-dialog .el-dialog__header {
      display: flex;
      align-items: center;
      height: 48px;
      background: #F7F8FA;
      padding: 0px 0px 0px 12px;
      .el-dialog__headerbtn {
        top: 15px;
      }
    }
    .user-manage-look-dialog .user-manage-look-box {
      display: flex;
      .look-left-box {
        margin-right: 140px;
        font-size: 14px;
        color: #606266;
        .user-avatar-con {
          display: flex;
          align-items: flex-start;
          position: relative;
          margin-left: 53px;
          .look-avatar {
            width: 96px;
            height: 96px;
            border-radius: 50%;
          }
        }
        .user-name-con {
          margin-top: 36px;
          margin-bottom: 16px;
          margin-left: 53px;
        }
        .user-phone-con {
          margin-left: 39px;
        }
        .user-mail-con {
          margin-top: 16px;
          margin-bottom: 28px;
          margin-left: 53px;
        }
        .user-work-con {
          margin-left: 53px;
        }
        .user-dept-con {
          margin-top: 15px;
          margin-bottom: 15px;
          margin-left: 24px;
        }
        .user-role-con {
          margin-bottom: 30px;
          margin-left: 24px;
        }
        .user-create-time {
          margin-left: 24px;
          margin-bottom: 15px;
        }
      }
      .look-right-box {
        margin-top: 124px;
        font-size: 14px;
        color: #606266;
        .user-login-con {
          margin-bottom: 16px;
          .login-name {
            padding-left: 41px;
          }
        }
        .user-is-login {
          margin-top: 58px;
          margin-bottom: 14px;
        }
        .user-remark-con {
          margin-left: 56px;
        }
      }
      .title {
        font-weight: bold;
      }
    }
    .user-manage-look-dialog .user-manage-edit-box {
      font-size: 14px;
      color: #606266;
      .avatar-edit-con {
        display: flex;
        align-items: flex-start;
        position: relative;
        margin-left: 53px;
        margin-bottom: 25px;
        .upload-avatar-btn {
          margin-left: 32px;
          margin-top: 60px;
        }
      }
      .user-info-box {
        display: flex;
        .position-label {
          margin-left: 80px;
        }
        .edit-init-login {
          margin-left: 80px;
          .init-pwd {
            margin-left: 30px;
          }
        }
        .edit-radio-login {
          width: 320px;
          margin-left: 80px;
        }
        .edit-remark-con {
          margin-left: 80px;
        }
      }
      .edit-create-time {
        margin-left: 28px;
        margin-bottom: 16px;
      }
      .title {
        font-weight: bold;
      }
    }
    .user-opt-btn {
      margin-top: 40px;
      text-align: right;
      .opt-box {
        width: 96px;
      }
    }
    .user-manage-look-dialog .demo-ruleForm {
      > > > .el-input--medium .el-input__inner {
        background: #F7F8FA;
      }
      > > > .el-input--medium .el-textarea__inner {
        background: #F7F8FA;
      }
    }
    > > > .el-button {
      line-height: 1.2;
    }
  }
</style>
